﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
		<script src="js/jquery.js"></script>
		<title>门店付款</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
/*				user-select:none;
				-webkit-user-select:none;
				-webkit-touch-callout:none;*/
			}
			html,
			body {
				height: 100%;
				overflow: hidden;
				background: #F0EFF5;
			}
			
			.wrap {
				position: relative;
				margin: 20px auto;
				width: 100%;
				height: 100%;
				z-index:1;
				overflow: hidden;
			}
			

			/* 输入表单 */
			
			.edit_cash {
				display: block;
				margin-top: 15px;
				padding: 15px;
				margin: 0 auto;
				width: 90%;
				border: 1px solid #CFCFCF;
				border-radius: 10px;
				background-color: #fff;
			}
			
			.edit_cash p {
				font-size: 14px;
				color: #8D8D8F;
			}
			
			.shuru {
				position: relative;
				margin-bottom: 10px;
			}
			
			#money {
				border: none;
				width: 100%;
				height: 50px;
				font-size: 25px;
				line-height: 50px;
				border-bottom: 1px solid #CFCFCF;
				padding-left: 30px;
				outline: none;
				white-space: pre;
				overflow: hidden;
			}
			
			.shuru span {
				position: absolute;
				line-height:50px;
				height:50px;
				font-size: 25px;
			}
			#submit {
				display: block;
				margin: 20px auto 0;
				width: 90%;
				height: 40px;
				font-size: 16px;
				color: #fff;
				background: green;
				border: 1px solid green;
				border-radius: 3px;
                cursor: pointer;
                -webkit-appearance: none;
			}
			#submit:disabled {
				color:#555;
				background:#aaa;
				border: 1px solid #999;
			}
						
			.message{
				position: fixed;
				min-width: 300px;
				max-width: 90%;
				min-height: 200px;
				top:50px;
				left: 50%;
				margin-left: -150px;
				z-index: 999;
				box-shadow: 0px 0px 15px #000;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				font-size: 14px;
				text-align:center;
			}
			.cancel{
				position: absolute;
				top: 10px;
				right: 10px;
			}
			.cancel svg{
				width:15px;
				height: 15px;
				pointer-events: none;
				display: block;
				fill:#fff;
			}
			.message>svg{
				pointer-events: none; display: block; width: 35px; height: 35px;fill: #fff;
			}
			.message .action{
				display: flex;
				width: 100%;
				justify-content: center;
			}
			.message .action a{
				border: #fff solid 1px;
				border-radius: 5px;
				color: #fff;
				text-decoration:none;
				text-align: center;
				padding: 5px;
				width: 100px;
				font-size: 13px;
				margin: 5px;
			}
			.message .msgContent {
				padding:1.5em;
				display: flex;
			}
			.message.success{
				background-color: rgba(38,146,0,0.95);
				display:none;
			}
			.message.fail{
				background-color: rgba(0,102,153,0.95);
				display:none;
			}
			.mask {
				position:absolute;
				top:0;
				left:0;
				width:100%;
				height:100%;
				background:rgba(0,0,0,0.3);
				display:none;
				z-index:100;
			}
			.message.coupon{
				text-align:center;
				background:rgba(255,255,255,0.8);
				display:none;
			}
			.message.coupon .action a{
				background-color: green;
				color:#fff;
				border-color: green;
			}
			.coupon h3 {
				color:#000;margin:0 0 0.5em;
			}
			.couponlist div {
				width:100%;
				background:#006699;
				padding:0.5em 1em;
				margin:0.5em 0;
				cursor:pointer;
			}
			.couponlist div.disable {
				background:#999;
				cursor:default;
			}
			.welfare{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.welfare a{
				margin: 5px;
				padding: 5px;
				display:inline-block;
				color: #000;
				background-color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="mask"></div>
		<div class="message success">
			<svg viewBox="0 0 16 16" preserveAspectRatio="xMidYMid meet" focusable="false"><g><path d="M8 1c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7zM8 0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8v0z"></path><path d="M8 13.2c-2 0-3.8-1.2-4.6-3.1l0.9-0.4c0.6 1.5 2.1 2.4 3.7 2.4s3.1-1 3.7-2.4l0.9 0.4c-0.8 2-2.6 3.1-4.6 3.1z"></path><path d="M7 6c0 0.552-0.448 1-1 1s-1-0.448-1-1c0-0.552 0.448-1 1-1s1 0.448 1 1z"></path><path d="M11 6c0 0.552-0.448 1-1 1s-1-0.448-1-1c0-0.552 0.448-1 1-1s1 0.448 1 1z"></path></g></svg>
			<div class="msgContent">
			付款成功，感谢您的惠顾！
			</div>
			<div class="action">
				<a href="javascript:void(0)" class="paymentAgain">继续付款</a>
				<a href="javascript:void(0)" class="paymentDone">返回商城</a>
			</div>
		</div>
		<div class="message fail">
			<svg viewBox="0 0 16 16" preserveAspectRatio="xMidYMid meet" focusable="false"><g><path d="M8 1c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7zM8 0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8v0z"></path><path d="M7 6c0 0.552-0.448 1-1 1s-1-0.448-1-1c0-0.552 0.448-1 1-1s1 0.448 1 1z"></path><path d="M11 6c0 0.552-0.448 1-1 1s-1-0.448-1-1c0-0.552 0.448-1 1-1s1 0.448 1 1z"></path><path d="M4 10h8v1h-8v-1z"></path></g></svg>
			<div class="msgContent">付款失败，请核对是否已扣款</div>
			<a href="javascript:void(0)" class="cancel" id="cancel"><svg viewBox="0 0 16 16" preserveAspectRatio="xMidYMid meet" focusable="false"><g><path d="M16 0l-1 0.010-7 6.99-7-6.99-1-0.010v1l7 7-7 7v1h1l7-7 7 7h1v-1l-7-7 7-7v-1z"></path></g></svg></a>
			<div class="action">
				<a href="javascript:void(0)" id="restart">重新付款</a>
			</div>
		</div>
		<div class="message coupon">
			<h3>付款成功，感谢您的惠顾！</h3>
			<p style="color:#333">领取优惠券</p>
			<div class="couponlist">
			</div>
			<div class="action">
				<a href="javascript:void(0)" class="paymentAgain">继续付款</a>
				<a href="javascript:void(0)" class="paymentDone">返回商城</a>
			</div>
		</div>
		<div class="wrap">
			<form action="#" class="edit_cash" onsubmit="return false">
				<p>消费总额</p>
				<div class="shuru">
					<span>&yen;</span>
					<input type="number" id="money" min="0.01" step="0.01" maxlength="10" />
				</div>
				<p>可询问工作人员应缴费用总额</p>
			</form>
			<input type="submit" value="立即付款" id="submit" />
		</div>
		<script>
            //防止token变更
        document.cookie.split(" ").join("").split(";").forEach(function(cookie){
            if(cookie.indexOf("token")==0){
                let hostname = window.location.hostname.substring(window.location.hostname.indexOf("."));
                let token = cookie.split("=")[1];
                let fn = function(){
                    document.cookie = "token="+ escape (token) + ";domain="+hostname+";path=/";
                };
                document.addEventListener("mousedown",fn);
                document.addEventListener("touchstart",fn);
                document.addEventListener("click",fn);
            }
        });
			$(function(){
				var apiHost = "https://"+window.location.hostname+"/plugin/api";
				var coupon_lock=false;
				$.ajaxSetup({crossDomain: true, xhrFields: {withCredentials: true},contentType:"application/json;charset=utf-8"});
				function GetQueryString(name) {
					 var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
					 var r = window.location.search.substr(1).match(reg);
					 if(r!=null)return  unescape(r[2]); return null;
				}
				var app_id = GetQueryString("app_id");
				function ParseError(result) {
					if(result && result.status == 500){
						ShowFail(result.message);
					}
				}
				function ShowFail(html) {
					$(".message").hide();
					$('.fail .msgContent').html(html);
					$(".mask").show();
					$(".fail").css('display', 'flex');
				}
				function ShowSuccess(html) {
					$(".message").hide();
					$('.success .msgContent').html(html);
					$(".mask").show();
					$(".success").css('display', 'flex');
				}
				function HideMessage() {
					$(".message").hide();
					$(".mask").hide();
				}
				function IsPrice(text) {
					var t = text.split('.');
					return !isNaN(text) && (t.length <= 1 || (t.length == 2 && t[1].length <= 2))
				}
				function CheckSubmit(text) {
					if(text && IsPrice(text)){
						$('#submit').removeClass('active');
						$('#submit').attr('disabled', false);
					}else{
						$('#submit').addClass('active');
						$('#submit').attr('disabled', true);
					}
				}
				function paySuccess(amount) {
					HideMessage();
					$.get(apiHost+"/coupon.list.private",{amount:amount,type:"paymented",app_id:app_id}).done(function(res){
						var html = '';
						res.result.forEach(function(item){
							html+='<div data-id="'+item.id+'">￥'+item.money+'元优惠卷 - 购物满'+item.quantity+(item.terms=='order-money'?'元':'件')+'使用</div>'
						});
						if(html && res.result.length > 0) {
							HideMessage();
							$(".mask").show();
							$('.couponlist').html(html);
							$(".coupon").css('display','flex');
							$('.couponlist div').click(function(){
								if($(this).attr("class")=="disable") return;
								coupon_lock = true;
								var coupon_id=$(this).attr('data-id');
								$(this).addClass('disable');
								if(coupon_id) CouponReceive(coupon_id);
							});
						} else {
							ShowSuccess("付款成功");
						}
					}).error(function(jqXHR, textStatus, errorThrown){
						ParseError(JSON.parse(jqXHR.responseText));
					});
				}
				function CouponReceive(coupon_id) {
					$.get(apiHost+"/coupon.receive",{coupon_id:coupon_id}).done(function(res){
						alert('领取优惠券成功');
					}).error(function(jqXHR, textStatus, errorThrown){
						alert(JSON.parse(jqXHR.responseText).message);
						coupon_lock = false;
					});
				}
				function submit() {
					var text = $('#money').val();
					if(IsPrice(text)) {
						CheckSubmit();
						out_trade_no = "normal_"+new Date().getTime();
						//请求支付
						$.get(apiHost+"/payment",{money:parseFloat(text),body:"到店支付",out_trade_no:out_trade_no,trade_type:"normal",pay_type:"JSAPI"},function(res){
							//调用小程序支付接口
							$.post(apiHost+"/wx.app.call?name=requestPayment",JSON.stringify(res),function(payrs){
								if(payrs.callback=="success"){//支付成功
									paySuccess(parseFloat(text));
								}
							}).error(function(jqXHR, textStatus, errorThrown){
								ParseError(JSON.parse(jqXHR.responseText));
							});
						}).error(function(jqXHR, textStatus, errorThrown){
							ParseError(JSON.parse(jqXHR.responseText));
						});
					}
				}
				//付款完毕
				$(".paymentDone").click(function(){
					//返回上一页
//					$.post(apiHost+"/wx.app.call?name=navigateBack",JSON.stringify({delta:1}));
					wx.miniProgram.navigateBack({delta:1});
				});
				$(".paymentAgain").click(function(){
					HideMessage();
				});

				$("#cancel").click(function(e){
					HideMessage();
					var text = $('#money').val();
					CheckSubmit(text);
				});
				//提交
				$('#submit').click(function(){
					submit()
				});
				//重新支付
				$('#restart').click(function(){
					submit()
				});
				//输入后判断合法金额
				$('#money').on('input',function(e){
					CheckSubmit(this.value);
				});
/*				$("body").on("touchmove",function(e){
					e.preventDefault;
				}, false);*/

				CheckSubmit();
			})
		</script>
        
	</body>
</html>
